import React, {PureComponent} from 'react'
import {connect} from 'react-redux'
import List from './components/List'
import Recommend from './components/Recommend'
import Topic from './components/Topic'
import Writer from './components/Writer'
import {actionCreators} from './store'
import {
  HomeWrapper,
  HomeLeft,
  HomeRight,
  BackTop
} from './style'
class Home extends PureComponent{
  handleScrollTop(){
    window.scrollTo(0, 0)
  }
  render(){
    return (
      <HomeWrapper>
        <HomeLeft>
          <img className="banner-img" alt="cc" src="//upload.jianshu.io/admin_banners/web_images/4516/cd9298634ca88ca71fc12752acf47917967a5d31.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"/> 
          <Topic/>
          <List/>
        </HomeLeft>
        <HomeRight>
          <Recommend/>
          <Writer/>
        </HomeRight>
        {this.props.showBottom ? <BackTop onClick={this.handleScrollTop}>回到顶部</BackTop> : null}
      </HomeWrapper>
    )
  }
  componentDidMount(){
    this.props.getList()
    this.bindEvents()
  }

  componentWillUnmount(){
    window.removeEventListener('scroll', this.props.changeShow)
  }

  bindEvents(){
    window.addEventListener('scroll', this.props.changeShow)
  }

}
const mapState = (state) => ({
  showBottom: state.getIn(['home', 'showBottom'])
})

const mapAction = (dispatch) => ({
  getList(){
    dispatch(actionCreators.getHomeList())
  },
  changeShow(){
    let show = document.documentElement.scrollTop > 100
    dispatch(actionCreators.toggleTopshow(show))
  }
})

export default connect(mapState, mapAction)(Home);